import { t } from 'i18next'
import { Button, CheckBox, CheckBoxGroup, Modal, Space } from '@kedacom/react-next'
import { getNoRemindMonitorExeInstalled, getNoRemindUpdateVersion, useMonitorStore } from './store'
import shallow from 'zustand/shallow'
import { InfoIcon, StyledWinDialog, StyledLinuxDialog } from './style'
import { NO_REMIND_EXE_INSTALLED, NO_REMIND_UPDATE_VERSION } from './constant'
import { cpuData, sysTypeData } from './interface'
import { useMemo, useState } from 'react'
import { compareVersion } from '../../utils/utils'

export default function Monitor() {
	const { isFirstWebLoad, minSupportVersion, _isUpdateDialog, _isLinuxDialogOpen, _isWinDialogOpen, update } =
		useMonitorStore(
			(state) => ({
				isFirstWebLoad: state.isFirstWebLoad,
				minSupportVersion: state.minSupportVersion,
				_isUpdateDialog: state._isUpdateDialog,
				_isLinuxDialogOpen: state._isLinuxDialogOpen,
				_isWinDialogOpen: state._isWinDialogOpen,
				update: state.update,
			}),
			shallow
		)
	const [cpuCheck, setCpuCheck] = useState<string[]>([])
	const [sysCheck, setSysCheck] = useState<string[]>([])

	const isShowNoRemind = useMemo(() => {
		return _isUpdateDialog
			? compareVersion(minSupportVersion, getNoRemindUpdateVersion())
			: !getNoRemindMonitorExeInstalled() && isFirstWebLoad
	}, [_isUpdateDialog, isFirstWebLoad, minSupportVersion])

	const isCpuAndSysChecked = useMemo(() => {
		return cpuCheck.length !== 0 && sysCheck.length !== 0
	}, [cpuCheck, sysCheck])

	const setNoRemindMonitorUpdateVersion = (val: boolean) => {
		localStorage.removeItem(NO_REMIND_UPDATE_VERSION)
		if (val) {
			localStorage.setItem(NO_REMIND_UPDATE_VERSION, minSupportVersion)
		}
	}
	const setNoRemindMonitorExeInstalled = (val: boolean) => {
		localStorage.removeItem(NO_REMIND_EXE_INSTALLED)
		if (val) {
			localStorage.setItem(NO_REMIND_EXE_INSTALLED, minSupportVersion)
		}
	}
	const linuxDialogReset = () => {
		setCpuCheck([])
		setSysCheck([])
	}
	const closeLinuxDialog = () => {
		linuxDialogReset()
		update({ _isLinuxDialogOpen: false })
	}
	const linuxDownload = () => {
		if (!isCpuAndSysChecked) return
		let val = cpuCheck[0] + sysCheck[0]
		let data = Math.random()
		switch (val) {
			case '11':
				window.location.href = '/static/kcmp/kcmp_aarch64.deb?' + data //飞腾 uos
				break
			case '12':
				window.location.href = '/static/kcmp/kcmp_aarch64.deb?' + data //飞腾 银河
				break
			case '23':
				window.location.href = '/static/kcmp/kcmp_mips64.rpm?' + data //龙芯 中标
				break
			case '21':
				window.location.href = '/static/kcmp/kcmp_mips64.deb?' + data //龙芯 uos
				break
			case '22':
				window.location.href = '/static/kcmp/kcmp_mips64.deb?' + data //龙芯 银河
				break
			case '13':
				window.location.href = '/static/kcmp/kcmp_aarch64.rpm?' + data //飞腾  中标
				break
			default:
				break
		}
		closeLinuxDialog()
	}
	return (
		<>
			{/* linux 提示框 */}
			<Modal
				title={_isUpdateDialog ? t('升级流程') : t('安装提示')}
				className="linus-setup-modal"
				open={_isLinuxDialogOpen}
				width={430}
				height={330}
				needFooter={false}
				onCancel={closeLinuxDialog}
			>
				<StyledLinuxDialog>
					<div className="content">
						<div>{t('请选择CPU型号和操作系统,下载对应的控件进行安装。')}</div>
						<div className="line-wrap">
							{t('CPU型号')}
							<span className="required">*</span>
							<CheckBoxGroup
								options={cpuData}
								value={cpuCheck}
								onChange={(e, v) => {
									setCpuCheck((pre) => v.filter((item) => !pre.includes(item)))
								}}
							/>
						</div>
						<div className="line-wrap">
							{t('操作系统')}
							<span className="required">*</span>
							<CheckBoxGroup
								options={sysTypeData}
								value={sysCheck}
								onChange={(e, v) => {
									setSysCheck((pre) => v.filter((item) => !pre.includes(item)))
								}}
							/>
						</div>
						<div>{t('与和视频相关的功能需要使用KCMP控件')}</div>
						<div>{t('成功安装后,请刷新当前界面。')}</div>
					</div>
					{isShowNoRemind && (
						<CheckBox
							className="no-remind"
							onChange={(e, v) =>
								_isUpdateDialog ? setNoRemindMonitorUpdateVersion(v) : setNoRemindMonitorExeInstalled(v)
							}
						>
							{t('不再提示')}
						</CheckBox>
					)}
					<Space className="btn-wrap" space={6}>
						<Button disabled={!isCpuAndSysChecked} onClick={linuxDownload}>
							{_isUpdateDialog ? t('下载升级') : t('下载安装')}
						</Button>
						<Button onClick={closeLinuxDialog}>{_isUpdateDialog ? t('不升级') : t('不安装')}</Button>
					</Space>
				</StyledLinuxDialog>
			</Modal>
			{/* win 提示框 */}
			<Modal
				title={t('提示')}
				className="win-setup-modal"
				open={_isWinDialogOpen}
				okText={t('下载安装')}
				cancelText={t('不安装')}
				width={400}
				height={260}
				onOk={() => {
					window.location.href = '/static/kcmp/KcmpSetup.exe?' + Math.random()
				}}
				onCancel={() => {
					update({ _isWinDialogOpen: false })
				}}
			>
				<StyledWinDialog>
					<InfoIcon className="info-icon" />
					{_isUpdateDialog ? (
						<>
							{t('KCMP控件发现新版本，请立即升级')}
							<br />
							{t('成功安装后，请刷新当前界面')}
							<br />
						</>
					) : (
						<>
							{t('与视频相关的功能需使用KCMP控件，请立即安装。成功安装后，请刷新当前界面')}
							<br />
						</>
					)}
					{isShowNoRemind && (
						<CheckBox
							className="no-remind"
							onChange={(e, v) =>
								_isUpdateDialog ? setNoRemindMonitorUpdateVersion(v) : setNoRemindMonitorExeInstalled(v)
							}
						>
							{t('不再提示')}
						</CheckBox>
					)}
				</StyledWinDialog>
			</Modal>
		</>
	)
}
